<template>
	<view class="bg">

		<view>
			<img src="https://oa.yuxiang123.cn/assets/task/shop/yu_bann.png" alt=""  mode="widthFix" style="width: 100%;position: absolute;">
			<img src="https://oa.yuxiang123.cn/assets/task/shop/yue_bann.png" alt=""  mode="widthFix" style="width: 100%;    width: 94%;
			margin-left: 3%;
			margin-top: 60rpx;
			position: relative;">
			<view class="zhong_tts">
				<view style="  
				height: 60rpx;font-size: 30rpx;">
					我的账户（元）
				</view>
				<view style="    font-size: 44rpx;
				font-weight: 600;">
					{{moneyInfo.yue || 0}}
				</view>
				<view class="zhong_butt" @click="torule('/merchant/shop/recharge')">充值</view>
				<view style="display: flex;flex-wrap: wrap;margin-top: 40rpx;">
					<view class="zc">
						<view style="font-size: 26rpx;">本月支出（元）</view>
						<view style="font-size: 38rpx;font-weight: 550;margin-top: 8rpx;">{{moneyInfo.month_out || 0}}</view>
					</view>
					<view class="zc">
						<view style="font-size: 26rpx;">本月充值（元）</view>
						<view style="font-size: 36rpx;font-weight: 550;margin-top: 8rpx;">{{moneyInfo.month_in || 0}}</view>
					</view>
				</view>
			</view>
			
		</view>


		<!-- <view class="top"  style="padding-top:90rpx">
			<div class="top_title">
				<image class="back" src="../../static/FANHUI.png" @click="back()" mode="aspectFill"></image>
				<text class="top_title_text">我的余额</text>
			</div>
			<view class="box">
				<view class="boxTitle">
					<view class="h1">账户余额</view>
					<view class="h2">
                        <view>{{moneyInfo.yue}}</view>
                        <view class="tx"  @click="torule('/merchant/shop/recharge')">充值</view>
                    </view>
				</view>

				<view class="bom">
					<view class="bom_box left">
						<view class="text">本月支出</view>
						<view class="money">{{moneyInfo.month_out || 0}}</view>
					</view>
					<view class="bom_box">
						<view class="text">本月充值</view>
						<view class="money">{{moneyInfo.month_in || 0}}</view>
					</view>
				</view>
			</view>
		</view> -->
		<view class="list">
			<view class="list_top">
				<view class="title">
					资金明细
				</view>
				<view class="time" @click="timeShow = true">
					<view class="text">{{time}}</view>
					<view class="icon">
						<u-icon name="arrow-down-fill"></u-icon>
					</view>
				</view>
				<u-picker v-model="timeShow" mode="time" @confirm="timeConfirm" :params="params"></u-picker>
			</view>
			<view class="list_item" v-if="moneyList.length > 0">
				<view class="item" v-for="(item,index) in moneyList" :key="index">
					<view class="left">
						<img src="https://oa.yuxiang123.cn/assets/task/shop/jine.png" >
					</view>
					<view class="center">
						<view class="title">
                            {{item.content}}
                        </view>
						<view class="desc">{{item.add_time}}</view>
					</view>
					<view class="right jia" v-if="item.price > 0">+{{item.price}}</view>
					<view class="right jian" v-if="item.content == '余额冻结'" style="color: #4CAF50;">{{item.price}}</view>
					<view class="right jian" v-if="item.content == '余额支出'">{{item.price}}</view>
				</view>
			</view>
			<view class="zanwu" v-else>
				<u-empty text="暂无记录" mode="list"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				time:'',
				order_id:'',
				code:'',
				freight:'',
				isTextPopup:false,
				timeShow:false,
				is_tishi:true,
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				moneyList:[],
				userInfo:'',
				moneyInfo:'',
				page:1,
				pagesize:10,
				statusBarHeight:0,
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo');
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
			var date = new Date();
			var year = date.getFullYear();
			if(date.getMonth()+1 < 10){
				var month ='0' + (date.getMonth()+1);
			}else{
				var month = date.getMonth()+1;
			}
			this.time = year + '-' + month;
		},
		onShow() {
			this.getMoney();
            // #ifdef MP-WEIXIN
			var that = this;
			uni.login({
				provider: 'weixin', 
				success: function (res) {
					that.code = res.code;
				}
			});
			// #endif
		},
		onReachBottom() {
			this.getMoneyS();
		},
		methods: {
            queding(){
                var that = this;
                if(that.order_id){
                    that.prepay(that.order_id,that.code);
                }else{
                    uni.request({
                        url: 'https://shop.yuxiang123.cn/api/pay/create_shop_order',
                        header: {"content-type": "application/x-www-form-urlencoded"},
                        method: 'POST',
                        data:{
                            token:uni.getStorageSync('token'),
                            shop_id:that.userInfo.shop_id,
                            price:that.freight,
                        },
                        success: (reset) => {
                            if(reset.data.code == 1){
                                that.order_id=reset.data.data.id;
                                that.prepay(reset.data.data.id,that.code);
                            }else{
                                that.$Toast(reset.data.msg);
                            }
                        }
                    })
                }
                
            },
            prepay(order_id,code){
				this.isTextPopup = false;
				var that = this;
				var data = {
					token:uni.getStorageSync('token'),
					code:code,
					order_id:order_id,
					price:that.freight,
					payment: 'wechat',
					shop_id:that.userInfo.shop_id
				};
				// #ifdef APP-PLUS
				var data = {
					token:uni.getStorageSync('token'),
					code:code,
					order_id:order_id,
					price:that.freight,
					payment: 'wechat',
					platform: 'App',
					shop_id:that.userInfo.shop_id
				};
				// #endif
				uni.request({
					url: 'https://shop.yuxiang123.cn/api/pay/shop_prepay',
					header: {"content-type": "application/x-www-form-urlencoded"},
					method: 'POST',
					data:data,
					success: (res) => {
						// #ifdef MP-WEIXIN
						uni.requestPayment({
							provider: 'wxpay',    //支付类型-固定值
							timeStamp: res.data.data.pay_data.timeStamp, // 时间戳（单位：秒）
							nonceStr: res.data.data.pay_data.nonceStr, // 随机字符串
							package: res.data.data.pay_data.package, // 固定值
							signType: res.data.data.pay_data.signType, //固定值
							paySign: res.data.data.pay_data.paySign, //签名
							success: function (res) {
								that.setMessage(res,1);
							},
							fail: function (err) {
								that.setMessage(err,2);
							}
						});
						// #endif
						// #ifdef APP-PLUS
						uni.requestPayment({
							provider: 'wxpay',    //支付类型-固定值
							orderInfo: res.data.data.pay_data, //微信订单数据(官方说是string。实测为object)
							success: function (res) {
								that.setMessage(res,1);
							},
							fail: function (err) {
								that.setMessage(err,2);
							}
						});
						// #endif
					}
				})
			},
			setMessage(res,type){
				var that = this;
				uni.request({
					url:'https://oa.yuxiang123.cn/api/index/addLog',
					method:'POST',
					header:{"content-type":"application/x-www-form-urlencoded"},
					data:{'content':'支付完成','type':type,'res':res},
				})
				if(type == 1){
					this.$Toast('支付成功');
					
				}else{
					this.$Toast('支付失败');
				}
				
			},
			back:function(){
				uni.navigateBack();
			},
			getMoney:function(){
				this.$show();
				var that = this;
				uni.request({
					url: 'https://oa.yuxiang123.cn/api/shop/get_shop_price_log',
					header: {
						"content-type": "application/x-www-form-urlencoded"
					},
					method: 'POST',
					data:{
                        token:uni.getStorageSync('token'),
                        month:that.time,
                        page:that.page,
                        pagesize:that.pagesize,
					},
					success: (res) => {
						that.$hide()
						that.moneyInfo = res.data.data;
						that.moneyList = res.data.data.month_log;
					}
				})
			},
			getMoneyS:function(){
				if(this.page * this.pagesize > this.moneyList.length){
					return false
				}
				var that = this;
				this.page++;
				this.$show();
				uni.request({
					url: 'https://oa.yuxiang123.cn/api/shop/get_shop_price_log',
					header: {
						"content-type": "application/x-www-form-urlencoded"
					},
					method: 'POST',
					data:{token:uni.getStorageSync('token'),month:that.time,
					page:that.page,
					pagesize:'20'},
					success: (res) => {
						that.$hide()
						that.moneyList = this.moneyList.concat(res.data.data.month_log);
					}
				})
			},
			timeConfirm:function(e){
				this.time = e.year + '-' + e.month;
				this.getMoney();
			},
			zhuanrangEvent(){
				uni.navigateTo({
					url: '/pages/user/jfzhuanrang'
				})
			},
			torule(url){
				console.log(url)
				uni.navigateTo({
					url:url
				})
			},
			torule_2(){
				uni.navigateTo({
					url:'/pages/user/wallet_rule_2?id=14'
				})
			},
            send_withdraw(){
                var that = this;
                if(that.moneyInfo.yue <= 0){
                    that.$Toast('您账户佣金不足，无法提现');
                    return false;
                }
                uni.showModal({
					title: '提示',
					content: '是否申请全额提现？',
					success: function (res) {
						if (res.confirm) {
							//更新订单状态
							uni.request({
								url: 'https://oa.yuxiang123.cn/api/distribute_task/send_withdraw',
								header: {
									"content-type": "application/x-www-form-urlencoded"
								},
								method: 'POST',
								data:{
									token:uni.getStorageSync('token'),
									price:that.moneyInfo.yue
								},
								success: (res) => {
                                    that.$Toast(res.data.msg);
									if(res.data.code == 1){
										that.moneyInfo.yue = 0;
                                        that.page = 1;
                                        that.moneyList.length = 0;
                                        that.getMoney();
									}
									
								}
							})
			
						}
					}
				});
            }

		}
	}
</script>
<style>	
	page{
		background-color: #f2f9fd;
	}
</style>
<style lang="scss">
    .textPopup{
	position: fixed;
	width: 100%;
	top: 0;
	bottom: 0;
	background-color: rgba($color: #000000, $alpha: 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	.textPopup_box{
		background-color: #FFFFFF;
		width: 90%;
		border-radius: 20upx;
		padding: 20upx;
		.textPopup_box_title{
			padding: 20rpx;
			text-align: center;
			font-size: 36upx;
		}
		.textPopup_box_input{
			input{
				padding:20upx;
				font-size:32upx;
				background-color: #f0f0f0;
				border-radius: 6upx;
			}
		}
		.textPopup_box_btn{
			display: flex;
			align-items: center;
			.textPopup_box_btn_box{
				flex: 1;
				text-align: center;
				padding: 30upx 0;
				font-size:36upx;
			}
		}
	}
}

.barheight{
	height:  var(–status-bar-height);
	background: transparent !important;
}


.zanwu{
	padding-top: 200upx;
}

.list{
	background-color: #fff;
	margin:10rpx 30rpx;
	border-radius: 20rpx;
	.list_top{
		display: flex;
		align-items: center;
		justify-content: space-between;
		.title{
			font-weight: bold;
			font-size:36rpx;
			padding:30rpx;
		}
		.time{
			display: flex;
			align-items: center;
			padding:0 30rpx;
			.text{
				font-size: 24upx;
				color: #999999;
				margin-right: 10upx;
			}
			.icon{
				font-size: 24upx;
				color: #999999;
			}
		}
	}
	.list_item{
		.item{
			display: flex;
			align-items: center;
			padding: 30upx;
			border-bottom: 1px solid #eee;
			.left{
				image{
					width: 70upx;
					height: 70upx;
				}
			}
			.center{
				flex: 1;
				line-height: 35upx;
				margin-left: 20upx;
				.title{
					font-size: 28upx;
					color: #333333;
				}
				.desc{
					font-size: 20upx;
					color: #999999;
				}
			}
			.right{
				font-size: 34upx;
				font-weight: bold;
			}
			.jia{
				color: #ffb632;
			}
			.jian{
				color: #4385f5;
			}
		}
	}
}
		.zhong_tts{
			width: 84%;
			margin-left: 3%;
			color: #fff;
			border-radius: 30rpx;
			position: absolute;
			z-index: 10000;
			padding: 2% 5%;
			top: 80rpx;
		}
		.zhong_butt{
			width: 130rpx;
			background: #fff;
			color: #3662EC;
			text-align: center;
			height: 50rpx;
			line-height: 50rpx;
			border-radius: 40rpx;
			position: absolute;
			right: 30rpx;
			margin-top: -80rpx;
		}
	
.tx{
    background: #2cb331;
    width: 17%;
    font-size: 30rpx;
    height: 55rpx;
    line-height: 55rpx;
    border-radius: 20rpx;
    position: absolute;
    top: 200rpx;
    right: 25rpx;
    font-weight: 500;
}
.dz_box .dz_title{margin-left: 8%; width:100%;text-align: left; height:80rpx;line-height:80rpx; font-size: 34rpx;color:#000;}
.dz_box .dz_content{width:90%;margin-left: 8%;;line-height:50rpx ; font-size: 32rpx;color:#333;}
.dz_box .dz_btn{
	width:80%;height:100rpx;line-height:100rpx;text-align: center;font-size:36rpx; margin:40rpx 10%;border-radius:50rpx; background-color: #feb543;color:#fff; 
}
.dz_box{width:100%;background-color:#fff;border-radius: 10rpx; overflow: hidden;z-index: 10000000;}
.dz_box .dz_close{width:100%;height: 40rpx;
	image{width:50rpx;height: 50rpx;float:right;margin: 20rpx 20rpx 0 0;}
}
.hong{
	width: 20rpx;
    height: 20rpx;
    background: red;
    display: inline-block;
    margin-right: 20rpx;
    border-radius: 50%;
}
.zc{
	width: 50%;
	text-align: center;
	color: #fff;
}

</style>
